<template>
    <!-- element-plus中的容器 -->
    <el-container class="layout-container">
        <!--导航栏-->
        <NavigationBar/>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <HeaderBar/>
            <!-- 中间区域 -->
            <el-main class="el-main">
                <div style="width: auto;border: none;=overflow-y: hidden;margin-left: 270px">
                    <router-view></router-view>
                </div>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>快乐摸鱼队 copyright@2024</el-footer>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import NavigationBar from "@/components/NavigationBar.vue";
import HeaderBar from "@/components/HeaderBar.vue";
</script>

<style lang="scss" scoped>
.layout-container {
    min-height: 100vh;
    
    .el-menu {
        border-right: none;
    }
}

.el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    .el-dropdown__box {
        display: flex;
        align-items: center;
        
        .el-icon {
            color: #999;
            margin-left: 10px;
        }
        
        &:active,
        &:focus {
            outline: none;
        }
    }
}

.el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}

.el-main {
    overflow-y: auto;
}
</style>
